<script setup lang="ts">
import { Menu, Button, Dropdown, Avatar, message } from 'ant-design-vue'
import type { MenuProps } from 'ant-design-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/loginUser'
import { userLogout } from '@/api/userController'
import AuthModal from '@/components/AuthModal.vue'


export interface MenuItem {
  key: string
  title: string
  path: string
}

const props = defineProps<{
  menuItems: MenuItem[]
  selectedKeys: string[]
}>()

const emit = defineEmits<{
  (e: 'update:selectedKeys', keys: string[]): void
}>()

const router = useRouter()
const loginUserStore = useLoginUserStore()

// 点击菜单项的处理函数
const handleClick: MenuProps['onClick'] = ({ key }) => {
  const item = props.menuItems.find(item => item.key === key)
  if (item) {
    router.push(item.path)
    emit('update:selectedKeys', [String(key)])
  }
}

// 用户菜单选项
const userMenuItems = [
  { key: 'profile', label: '个人资料' },
  { key: 'settings', label: '设置' },
  { key: 'logout', label: '退出登录' }
]

// 处理用户菜单点击
const handleUserMenuClick: MenuProps['onClick'] = async ({ key }) => {
  if (key === 'logout') {
    // 使用项目中已有的API接口
    try {
      const res = await userLogout()
      if (res.data.code === 0) {
        // 退出登录成功，更新用户状态
        loginUserStore.setLoginUser({ userName: '未登录' })
        message.success('退出登录成功')
        router.push('/')
      } else {
        message.error('退出登录失败: ' + res.data.message)
      }
    } catch {
      message.error('退出登录失败')
    }
  } else if (key === 'profile') {
    // 跳转到个人资料页面
    router.push('/user/profile')
  } else {
    console.log('点击了用户菜单项:', key)
  }
}

// 认证弹窗状态
const authModalVisible = ref(false)
const authMode = ref<'login' | 'register'>('login')

// 打开登录弹窗
const openLoginModal = () => {
  authMode.value = 'login'
  authModalVisible.value = true
}

// 打开注册弹窗
const openRegisterModal = () => {
  authMode.value = 'register'
  authModalVisible.value = true
}

// 认证成功回调
const handleAuthSuccess = () => {
  // 重新获取用户信息
  loginUserStore.fetchLoginUser()
}
</script>

<template>
  <div class="global-header">
    <div class="header-left">
      <div class="logo">
        <img src="@/assets/ai/modern-logo.svg" alt="logo" class="logo-img" />
        <span class="logo-text">智能代码精灵</span>
      </div>
      <Menu
        mode="horizontal"
        :items="menuItems.map(item => ({ key: item.key, label: item.title }))"
        :selected-keys="selectedKeys"
        @click="handleClick"
        class="nav-menu"
      />
    </div>
    <div class="header-right">
      <!-- 根据登录状态显示登录按钮或用户头像 -->
      <div v-if="loginUserStore.loginUser.id">
        <Dropdown :trigger="['click']">
          <Avatar :src="loginUserStore.loginUser.userAvatar || 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'" style="cursor: pointer;" />
          <template #overlay>
            <Menu :items="userMenuItems" @click="handleUserMenuClick" />
          </template>
        </Dropdown>
      </div>
      <div v-else>
        <div class="auth-buttons">
          <Button type="default" @click="openRegisterModal" class="register-btn">注册</Button>
          <Button type="primary" @click="openLoginModal" class="login-btn">登录</Button>
        </div>
      </div>
    </div>

    <!-- 认证弹窗 -->
    <AuthModal
      v-model:open="authModalVisible"
      :default-mode="authMode"
      @success="handleAuthSuccess"
    />
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 统一动画变量 */
:root {
  --animation-duration-fast: 0.2s;
  --animation-duration-normal: 0.3s;
  --animation-duration-slow: 0.5s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.global-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 64px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.global-header:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 32px rgba(102, 126, 234, 0.15);
  border-bottom-color: rgba(102, 126, 234, 0.2);
}

.header-left {
  display: flex;
  align-items: center;
  flex: 1;
  animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.logo {
  display: flex;
  align-items: center;
  margin-right: 32px;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover {
  transform: scale(1.05);
}

.logo-img {
  height: 40px;
  width: 40px;
  margin-right: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.3));
}

.logo-img:hover {
  filter: drop-shadow(0 4px 16px rgba(102, 126, 234, 0.5));
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo:hover .logo-text {
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.2));
}

.nav-menu {
  flex: 1;
  border: none;
  font-family: inherit;
}

.nav-menu :deep(.ant-menu-item) {
  font-weight: 500;
  border-radius: 12px;
  margin: 0 6px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.nav-menu :deep(.ant-menu-item::before) {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
  transition: left 0.5s ease;
}

.nav-menu :deep(.ant-menu-item:hover::before) {
  left: 100%;
}

.nav-menu :deep(.ant-menu-item:hover) {
  background: rgba(102, 126, 234, 0.12);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.nav-menu :deep(.ant-menu-item-selected) {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
  color: #667eea;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.25);
  transform: translateY(-1px);
}

.header-right {
  display: flex;
  align-items: center;
  animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.auth-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.register-btn {
  border-radius: 20px;
  font-weight: 500;
  padding: 4px 20px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(102, 126, 234, 0.3);
  color: #667eea;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.register-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
  transition: all 0.4s ease;
  transform: translate(-50%, -50%);
}

.register-btn:hover::before {
  width: 300px;
  height: 300px;
}

.register-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: #667eea;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.login-btn {
  border-radius: 20px;
  font-weight: 500;
  padding: 4px 20px;
  height: 36px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.login-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.login-btn:hover::after {
  left: 100%;
}

.login-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.5);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.header-right :deep(.ant-avatar) {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(102, 126, 234, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.header-right :deep(.ant-avatar::before) {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(102, 126, 234, 0.3), transparent);
  transform: rotate(-45deg);
  transition: all 0.6s ease;
  opacity: 0;
}

.header-right :deep(.ant-avatar:hover::before) {
  opacity: 1;
  transform: rotate(45deg);
}

.header-right :deep(.ant-avatar:hover) {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  border-color: #667eea;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .global-header {
    padding: 0 20px;
    height: 60px;
  }

  .nav-menu :deep(.ant-menu-item) {
    margin: 0 4px;
    border-radius: 10px;
  }
}

@media (max-width: 768px) {
  .global-header {
    padding: 0 16px;
    height: 56px;
  }

  .logo {
    margin-right: 16px;
  }

  .logo-img {
    height: 32px;
    width: 32px;
    margin-right: 8px;
  }

  .logo-text {
    font-size: 18px;
  }

  .nav-menu :deep(.ant-menu-item) {
    margin: 0 2px;
    font-size: 14px;
  }

  .header-right :deep(.ant-btn) {
    font-size: 12px;
    padding: 4px 8px;
  }
}

@media (max-width: 480px) {
  .global-header {
    padding: 0 12px;
    height: 52px;
  }

  .nav-menu :deep(.ant-menu-item) {
    margin: 0 1px;
    padding: 0 8px;
    font-size: 12px;
  }

  .header-right {
    gap: 4px;
  }

  .header-right :deep(.ant-btn) {
    font-size: 11px;
    padding: 2px 6px;
    min-width: auto;
  }
}
</style>
